<template>
  <van-nav-bar title="商品评价" left-text="" left-arrow @click-left="goBack" />
  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box">
            <h3>{{ info.status_text }}</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src="/assets/images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 收货地址 -->
      <div class="aui-flex">
        <div class="aui-flex-add">
          <img :src="LoginUser.avatar" alt="" />
        </div>
        <div class="aui-flex-box">
          <h3>
            {{ info.address.consignee }} <em> {{ info.address.mobile }}</em>
          </h3>
          <p>{{ info.address.region_text + info.address.address }}</p>
        </div>
      </div>
      <!-- 订单商品 -->
      <div class="aui-commodity-bg">
        <div class="item " v-for="item in info.rateinfo" :key="item.id" >
          <div class="aui-flex">
            <div class="aui-commodity-img">
              <img :src="item.product.thumbs_text" />
            </div>
            <div class="aui-flex-box">
              <h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
              <p>商品单价：￥{{ item.price }}</p>
              <span class="aui-barter-time">七天退换</span>
            </div>
            <div>
              <h5>￥{{ item.total }}</h5>
              <p class="aui-sml-text">X{{ item.pronum }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 商品评价 -->
      <van-form v-for="item in info.rateinfo" :key="item.id">
        <van-cell-group inset  >
          <van-field
            name="rate"
            label="评分"
            :rules="[{ required: true, message: '请选择评分' }]"
          >
            <template #input>
              <van-rate v-model="item.rate" icon="fire" void-icon="fire-o" />
            </template>
          </van-field>
          <van-field
            v-model="item.comment"
            rows="2"
            autosize
            label="评价内容"
            type="textarea"
            maxlength="120"
            placeholder="请输入评价内容"
            show-word-limit
          />
          <van-field name="avatar" label="评价图片">
            <template #input>
              <van-uploader v-model="item.thumbs_list" multiple :max-count="0" :disabled="false" :deletable="false" />
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
    </section>
  </section>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const LoginUser = reactive(proxy.$cookies.get("LoginUser"));
const goBack = () => {
  proxy.$router.go(-1);
};
const orderproid = ref(proxy.$route.query.orderid ?? 0);
const info = ref({
  address: {},
});
const rate = ref(0);
const comment = ref("");
const avatarList = ref([]);

onBeforeMount(() => {
  getOrderInfoData();
});
const getOrderInfoData = async () => {
  let result = await Api.OrderRatesinfo({
    busid: LoginUser.id,
    orderproid: orderproid.value,
  });
  if (result.code == 1) {
    info.value = result.data;
    console.log(info.value);
  }
};
</script>
<style>
@import url("/assets/css/info.css");
</style>